<template>
<h1>循环指令</h1>
  <ul>
<!--    item从1开始，每执行一次，item的值就加1，一直到数字 n -->
<!--    v-for的效果：执行5次，生成5个li,里面的数字是1~5  -->
    <li v-for="item in 5">{{item}}</li>
  </ul>
  <hr>
  <ul>
    <li v-for="p in productArr">{{ p }}</li>
  </ul>
  <hr>
  <table border="1px">
      <tr>
        <th>序号</th>
        <th>标题</th>
        <th>价格</th>
        <th>库存</th>
        <th>操作</th>

      </tr>



    <tr v-for="(item,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{item.title}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>



  </table>
</template>
<script setup>
import {ref} from "vue";

const productArr=ref([
  {title:'苹果',price:100,num:25},
  {title:'香蕉',price:150,num:25},
  {title:'葡萄',price:160,num:25},
  {title:'桃子',price:10,num:25}
]);


const del=(index)=>{
  if (confirm("确认删除")){
    productArr.value.splice(index,1);
  }
};

</script>


<style scoped>

</style>